<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
        <div class="catbox">
        <table id="cartTable">
            <thead>
            <tr>
                <th><label>
                    <input class="check-all check" type="checkbox"/>&nbsp;&nbsp;全选</label></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/1.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td>
                <td class="price">5999.88</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">5999.88</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/2.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td>
                <td class="price">3888.50</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">3888.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/3.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td>
                <td class="price">1428.50</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">1428.50</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr>
            <tr class="tr1">
                <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                <td class="goods"><img src="t/images/images/4.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td>
                <td class="price">640.60</td>
                <td class="count"><span class="reduce"></span>
                    <input class="count-input" type="text" value="1"/>
                    <span class="add">+</span></td>
                <td class="subtotal">640.60</td>
                <td class="operation"><span class="delete">删除</span></td>
            </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <label class="fl select-all"><input type="checkbox" class="check-all check"/>&nbsp;&nbsp;全选</label>
            <a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice"/>
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span></div>
        </div>
    </div>
    
    <script>
     var tbody=document.getElementsByTagName("tbody")[0]
    //  cookie方法
//      var cookie=document.cookie
//      var list=cookie.match(/id_\d/ig)
//      for(var i=0;i<list.length;i++){
//          list[i]=list[i].split("_")[1]
//      }
//    console.log(list)
//    var html=""
//    for(var i=0;i<list.length;i++){
//        var goodsid=getcookie("id_"+list[i])
//        var goodsname=getcookie("name_"+list[i])
//        var goodsimg=getcookie("img_"+list[i])
//        var goodsnum=getcookie("num_"+list[i])
//        var goodsprice=getcookie("price_"+list[i])
//        html +=`<tr class="tr1">
//                 <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
//                 <td class="goods"><img src="${goodsimg}" alt=""/><span>${goodsname}</span></td>
//                 <td class="price">${goodsprice}</td>
//                 <td class="count"><span class="reduce">${goodsnum>1?"-":""}</span>
//                     <input class="count-input" type="text" value="${goodsnum}"/>
//                     <span class="add">+</span></td>
//                 <td class="subtotal">${goodsprice*goodsnum}</td>
//                 <td class="operation"><span class="delete">删除</span></td>
//             </tr>`
//    }

//   localStorage方法（本地存储）
    // var html=""
    // if(window.localStorage){
    //     console.log(localStorage.length)
    //     for(var i=0;i<localStorage.length;i++){
    //       if(localStorage.key(i).indexOf("goods_")!=-1){
    //          var goods=localStorage.getItem(localStorage.key(i));
    //          var goods=JSON.parse(goods)
    //          var goodsid=goods.goodsid
    //         var goodsname=goods.goodsname
    //         var goodsimg=goods.goodsimg
    //         var goodsnum=goods.goodsnum
    //         var goodsprice=goods.goodsprice
    //         html +=`<tr class="tr1">
    //                     <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
    //                     <td class="goods"><img src="${goodsimg}" alt=""/><span>${goodsname}</span></td>
    //                     <td class="price">${goodsprice}</td>
    //                     <td class="count"><span class="reduce">${goodsnum>1?"-":""}</span>
    //                         <input class="count-input" type="text" value="${goodsnum}"/>
    //                         <span class="add">+</span></td>
    //                     <td class="subtotal">${goodsprice*goodsnum}</td>
    //                     <td class="operation"><span class="delete">删除</span></td>
    //                 </tr>`
    //       }
    //     }
    // }

//    tbody.innerHTML=html

//    获取json数据版
    var html="" 

    var xhr=new XMLHttpRequest();
    xhr.open("get","date.json",true)
    xhr.send()
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
               var datelist=xhr.responseText
               var goodslist=JSON.parse(datelist)
               console.log(goodslist)
               goodslist.forEach((item) => {
                var {goodsId,goodsName,goodsImg,goodsNum,goodsPrice}=item
                console.log(goodsId,goodsName,goodsImg,goodsNum,goodsPrice)
                html+=`<tr class="tr1">
                         <td class="checkbox"><input class="check-one check" type="checkbox"/></td>
                         <td class="goods"><img src="${goodsImg}" alt=""/><span>${goodsName}</span></td>
                         <td class="price">${goodsPrice}</td>
                         <td class="count"><span class="reduce">${goodsNum>1?"-":""}</span>
                             <input class="count-input" type="text" value="${goodsNum}"/>
                            <span class="add">+</span></td>
                         <td class="subtotal">${goodsPrice*goodsNum}</td>
                          <td class="operation"><span class="delete">删除</span></td>
                     </tr>`
               });
               tbody.innerHTML=html
        }
    }


   function getcookie(name){
      if(document.cookie){
        var str=document.cookie
        var arr=str.split(";")
        for(var i=0;i<arr.length;i++){
            var key=arr[i].trim().split("=")[0]
            var value=arr[i].split("=")[1]
            if(key==name){
                return decodeURIComponent(value)
            }
        }   
      }
      return ""
    }
   function getTotal(){}
    var pricetotal=document.getElementById("priceTotal");
    var addlist=document.getElementsByClassName("add");
    var redulist=document.getElementsByClassName("reduce");
    var deletelist=document.getElementsByClassName("delete");
    var checklist=document.getElementsByClassName("check-one")
    var checkall=document.getElementsByClassName("check-all")[0]
    var deleteall=document.getElementById("deleteAll");
    var selectedtotal=document.getElementById("selectedTotal")
     // 加法   1. 点击数量+1   2. 小计价格要更新   3. 减号出现   
    for(var i=0;i<addlist.length;i++){
       addlist[i].onclick=function(){
          var num=this.previousElementSibling.value//数量
          num++;
          var price=this.parentElement.previousElementSibling.innerHTML//单价
          this.previousElementSibling.value=num
          var subinp=this.parentElement.nextElementSibling;
          subinp.innerHTML=(price*num).toFixed(2)//小数计算的精度问题
          this.previousElementSibling.previousElementSibling.innerHTML="-"
          total()
       }
    }

     // 减号  
    // 1. 数量减1      
    // 3. 数量 等于一的时候 "-" 要消失  4.数量等于1时 再次点击减号没有用
    // 2.小计要更新     
    for(var i=0;i<redulist.length;i++){
            redulist[i].onclick=function(){
                var num=this.nextElementSibling.value //数量 
                if(num==1){
                    return false
                }
                num--
                if(num==1){
                this.innerHTML=""
                }
                this.nextElementSibling.value=num ;
                var price=this.parentElement.previousElementSibling.innerHTML//单价
                var subinp=this.parentElement.nextElementSibling;
                subinp.innerHTML=(price*num).toFixed(2)//小数计算的精度问题
                total()
            }
    }

    // 删除 删除这一行   
    for(var i=0;i<deletelist.length;i++){
        deletelist[i].onclick=function(){
           this.parentElement.parentElement.remove()
           var count=0
          for(var j=0;j<checklist.length;j++){
              if(checklist[j].checked){
              count++
            }
          }
          if(count==checklist.length&&count!=0){
              checkall.checked=true
          }
          else{
            checkall.checked=false
          }
          
          total()  
        }  
    }
    
    // 全选    
    checkall.onclick=function(){
        var flag=checkall.checked
       for(var i=0;i<checklist.length;i++){
           checklist[i].checked=flag
       }
       if(flag){
        total()
       }
       else{
        pricetotal.innerHTML="0.00"
        selectedtotal.innerHTML=0
       }
    }
    
    // 单选
     for(var i=0;i<checklist.length;i++){
        checklist[i].onclick=function(){
            checkall.checked=false 
          var count=0
          for(var j=0;j<checklist.length;j++){
              if(checklist[j].checked){
              count++
            }
          }
          if(count==checklist.length){
              checkall.checked=true
          }
          total()
     }
     }

    //下面的删除    
    deleteall.onclick=function(){
        for(var i=0;i<checklist.length;i++){
            if(checklist[i].checked){
                checklist[i].parentElement.parentElement.remove()
                i--
            }
        }
        total()
    }
    
    //  全选计算总价
     function total(){
        var pricetotal=document.getElementById("priceTotal");
        var subtlist=document.getElementsByClassName("subtotal");
        var numlist=document.getElementsByClassName("count-input")
        var totalprice=0
        var totalnum=0
          for(let i=0;i<subtlist.length;i++){
            var price=subtlist[i].innerHTML*1
            if(checklist[i].checked){
               totalprice+=price
               totalnum+=numlist[i].value*1
            } 
          }
         pricetotal.innerHTML=totalprice.toFixed(2)
         selectedtotal.innerHTML=totalnum
     }

    //  input框事件
    var numlist=document.getElementsByClassName("count-input")
    for(var i=0;i<numlist.length;i++){
        numlist[i].oninput=function(){
              var num=this.value   //数量
              var price=this.parentElement.previousElementSibling.innerHTML //单价
              this.parentElement.nextElementSibling.innerHTML=(num*price).toFixed(2)
              total()
        }
    }
    </script>
</body>
</html>